{% load i18n %}
{% load staticfiles %}
{% get_current_language as LANGUAGE_CODE %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

    <title>{% trans 'MRC Block programming' %}</title>
    <link rel="icon" href="{% static 'img/mrc_logo.png' %}" type="img/x-ico" />
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'bootstrap3-editable/css/bootstrap-editable.css' %}">
    <link rel="stylesheet" href="{% static 'js/layer/theme/default/layer.css' %}">
    <link rel="stylesheet" href="{% static 'js/jquery-ui-1.12.1.custom/jquery-ui.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/index.css' %}">
    <link rel="stylesheet" href="{% static 'css/introjs.css' %}">
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/jquery-ui-1.12.1.custom/jquery-ui.min.js' %}"></script>
    <script src="{% static 'js/spark-md5.js' %}"></script>
    <script>
        window.language_code="{{ LANGUAGE_CODE }}";
    </script>
    <script src="{% static 'js/toolbox/loadxml.js' %}"></script>

    <!-- ******************debug model*********************** -->
{#            <script src="{% static 'blockly/blockly_uncompressed_vertical.js' %}"></script>#}
{#            {% ifequal LANGUAGE_CODE "zh-hans" %}#}
{#                <script src="{% static 'blockly/msg/js/zh-hans.js' %}"></script>#}
{#            {% else %}#}
{#                <script src="{% static 'blockly/msg/js/en.js' %}"></script>#}
{#            {% endifequal %}#}
{##}
{#            <script src="{% static 'blockly/blocks_vertical/vertical_extensions.js' %}"></script>#}
{#            <script src="{% static 'blockly/blocks_common/math.js' %}"></script>#}
{#            <script src="{% static 'blockly/blocks_common/text.js' %}"></script>#}
{#            <script src="{% static 'blockly/blocks_common/colour.js' %}"></script>#}
{#            <script src="{% static 'blockly/blocks_vertical/control.js' %}"></script>#}
{#            <script src="{% static 'blockly/blocks_vertical/event.js' %}"></script>#}
{#            <script src="{% static 'blockly/blocks_vertical/motion.js' %}"></script>#}
{#            <script src="{% static 'blockly/blocks_vertical/looks.js' %}"></script>#}
{#            <script src="{% static 'blockly/blocks_vertical/procedures.js' %}"></script>#}
{#            <script src="{% static 'blockly/blocks_vertical/operators.js' %}"></script>#}
{#            <script src="{% static 'blockly/blocks_vertical/pen.js' %}"></script>#}
{#            <script src="{% static 'blockly/blocks_vertical/sound.js' %}"></script>#}
{#            <script src="{% static 'blockly/blocks_vertical/sensing.js' %}"></script>#}
{#            <script src="{% static 'blockly/blocks_vertical/data.js' %}"></script>#}
{#            <script src="{% static 'blockly/blocks_vertical/inout.js' %}"></script>#}
{#            <script src="{% static 'blockly/blocks_vertical/default_toolbox.js' %}"></script>#}
{#            <script src="{% static 'blockly/blocks_vertical/customs.js' %}"></script>#}
{#            <script src="{% static 'blockly/blocks_vertical/servo.js' %}"></script>#}
{##}
{#            <script src="{% static 'blockly/generators/arduino.js' %}"></script>#}
{#            <script src="{% static 'blockly/generators/arduino/logic.js' %}"></script>#}
{#            <script src="{% static 'blockly/generators/arduino/math.js' %}"></script>#}
{#            <script src="{% static 'blockly/generators/arduino/control.js' %}"></script>#}
{#            <script src="{% static 'blockly/generators/arduino/text.js' %}"></script>#}
{#            <script src="{% static 'blockly/generators/arduino/data.js' %}"></script>#}
{#            <script src="{% static 'blockly/generators/arduino/inout.js' %}"></script>#}
{#            <script src="{% static 'blockly/generators/arduino/customs.js' %}"></script>#}
{#            <script src="{% static 'blockly/generators/arduino/servo.js' %}"></script>#}
{#            <script src="{% static 'blockly/generators/arduino/motion.js' %}"></script>#}
{##}
{#            <script type="application/javascript" src="{% static 'blockly/generators/javascript.js' %}"></script>#}
{#            <script type="application/javascript" src="{% static 'blockly/generators/javascript/logic.js' %}"></script>#}
{#            <script type="application/javascript" src="{% static 'blockly/generators/javascript/math.js' %}"></script>#}
{#            <script type="application/javascript" src="{% static 'blockly/generators/javascript/motion.js' %}"></script>#}
{#            <script type="application/javascript" src="{% static 'blockly/generators/javascript/control.js' %}"></script>#}
{#            <script type="application/javascript" src="{% static 'blockly/generators/javascript/text.js' %}"></script>#}
{#            <script type="application/javascript" src="{% static 'blockly/generators/javascript/data.js' %}"></script>#}
{#            <script type="application/javascript" src="{% static 'blockly/generators/javascript/inout.js' %}"></script>#}
{#            <script type="application/javascript" src="{% static 'blockly/generators/javascript/servo.js' %}"></script>#}
{#            <script type="application/javascript" src="{% static 'blockly/generators/javascript/customs.js' %}"></script>#}
{##}
{##}
{#            <script type="application/javascript" src="{% static 'blockly/generators/python.js' %}"></script>#}
{#            <script type="application/javascript" src="{% static 'blockly/generators/python/logic.js' %}"></script>#}
{#            <script type="application/javascript" src="{% static 'blockly/generators/python/math.js' %}"></script>#}
{#            <script type="application/javascript" src="{% static 'blockly/generators/python/motion.js' %}"></script>#}
{#            <script type="application/javascript" src="{% static 'blockly/generators/python/control.js' %}"></script>#}
{#            <script type="application/javascript" src="{% static 'blockly/generators/python/text.js' %}"></script>#}
{#            <script type="application/javascript" src="{% static 'blockly/generators/python/data.js' %}"></script>#}
{#            <script type="application/javascript" src="{% static 'blockly/generators/python/inout.js' %}"></script>#}
{#            <script type="application/javascript" src="{% static 'blockly/generators/python/servo.js' %}"></script>#}
{#            <script type="application/javascript" src="{% static 'blockly/generators/python/customs.js' %}"></script>#}
    <!-- *********************end debug****************************** -->


    <!-- ************************release model************************************* -->
    <script type="application/javascript" src="{% static 'lib/blockly_compressed_vertical.js' %}"></script>
    <script src="{% static 'lib/blocks_compressed.js' %}"></script>
    <script type="application/javascript" src="{% static 'lib/blocks_compressed_vertical.js' %}"></script>
    <script type="application/javascript" src="{% static 'lib/arduino_compressed.js' %}"></script>
    <script type="application/javascript" src="{% static 'lib/python_compressed.js' %}"></script>
    {% ifequal LANGUAGE_CODE "zh-hans" %}
        <script src="{% static 'msg/js/zh-hans.js' %}"></script>
    {% else %}
        <script src="{% static 'msg/js/en.js' %}"></script>
    {% endifequal %}
    <!-- ************************** end release********************************** -->






    <script src="/jsi18n"></script>
    <script type="application/javascript" src="{% static 'js/online_modal_global_variables.js' %}"></script>
    <script src="{% static 'js/FileSaver.min.js' %}"></script>
    <script src="{% static 'js/spin.js' %}"></script>
    <script src="{% static 'js/blockly_helper.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    <script src="{% static 'bootstrap3-editable/js/bootstrap-editable.js' %}"></script>
    <script src="{% static 'js/jszip.min.js' %}"></script>

    <script src="{% static 'js/layer/layer.js' %}"></script>
    <script src="{% static 'js/action_api.js' %}"></script>
    <script src="{% static 'js/tool.js' %}"></script>
    <script src="{% static 'js/uploads-core.js' %}"></script>
    <script src="{% static 'js/index.js' %}"></script>
    <script src="{% static 'js/intro.js' %}"></script>

</head>

<body onload="toolboxReady()">
<div style="background-color: #f9f4c09e;
    font-size: 12px;
    line-height: 30px;
    height: 30px;
    vertical-align: middle;
    display: none;" class="clear" id="notice_tip">
    <marquee style="width: 98%;float: left">
        <span>
        </span>
    </marquee>
    <div style="display: inline-block;float: left;margin-left: 1%;cursor: pointer" onclick="notice_close(this)">
        <span aria-hidden="true">x</span>
    </div>
</div>

<div id="load_wait"></div>
<div class="meta-nav">
    <nav class="navbar navbar-top navbar-inverse">
        <div class="container-fluid">
            <div class="">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">
                        <img alt="Brand" src="{% static 'img/mrc_logo.png' %}" style="height: 90%">
                    </a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-left navbar-nav-top">
                        <li>
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="lange_a">
                                <img src="{% static 'img/lang.png' %}" alt="" style="height: 20px">
                            </a>
                            <ul class="dropdown-menu">
                                {% for lang in LANGUAGES %}
                                    <li style="position: relative">
                                        {% ifequal lang.0 LANGUAGE_CODE %}
                                            <i class="glyphicon glyphicon-ok" style="display: block;position: absolute;top: 6px;"></i>
                                        {% endifequal %}
                                        <a href="javascript:void(0)" value="{{ lang.0 }}" onclick="selectdo(this)">{% trans lang.1 %}</a></li>
                                {% endfor %}
                            </ul>
                        </li>
                        <li>
                            <a href="#" class="download dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
                               aria-expanded="false">{% trans 'File' %}<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="javascript:void(0)" onclick="new_empty_project()">{% trans 'New empty project' %}</a></li>
                                <li><a href="javascript:void(0)" onclick="save()">{% trans 'Save project' %}</a></li>
                                <li><a href="javascript:void(0)" id="fakeload">{% trans 'Load project' %}</a>
                                    <input type="file" id="load" accept="mt" style="display: none;"/>
                                </li>
                                <li class="dropdown-submenu">
                                    <a href="#" id="show_history">{% trans 'history records' %}<span></span></a>
                                    <ul class="dropdown-menu">
                                        <li class="board-connect">
                                            <i class="glyphicon glyphicon-ok" style="display: none"></i>
                                            <a href="javascript:void(0)" >
                                                <ul class="history">
                                                    <!--<li> <a href="#" data-toggle="modal" data-target="#myModal03">2018.3.13</a><button data-toggle="modal" data-target="#myModal04">删除</button></li>-->
                                                    <!--<li> <a href="#" data-toggle="modal" data-target="#myModal03">2018.3.12</a><button data-toggle="modal" data-target="#myModal04">删除</button></li>-->
                                                    <!--<li> <a href="#" data-toggle="modal" data-target="#myModal03">2018.3.11</a><button data-toggle="modal" data-target="#myModal04">删除</button></li>-->
                                                    <!--<li> <a href="#" data-toggle="modal" data-target="#myModal03">2018.3.10</a><button data-toggle="modal" data-target="#myModal04">删除</button></li>-->
                                                </ul>
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li id="board_selection_tip">
                            <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
                               aria-expanded="false">{% trans 'Edit' %}<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li class="dropdown-submenu">
                                    <a href="#">{% trans 'board selection' %}<span></span></a>
                                    <ul class="dropdown-menu">
                                        <li class="board"><i class="glyphicon glyphicon-ok" style="display: block"></i><a href="javascript:void(0)" value="arduino:avr:nano:cpu=atmega328" onclick="select_board(this)">MRC</a></li>
                                        <li class="board"><i class="glyphicon glyphicon-ok" style="display: none"></i><a href="javascript:void(0)" value="arduino:avr:nano:cpu=atmega328" onclick="select_board(this)">arduino nano</a></li>
                                        <li class="board"><i class="glyphicon glyphicon-ok" style="display:none"></i><a href="javascript:void(0)" value="arduino:avr:uno" onclick="select_board(this)">arduino uno</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
                               aria-expanded="false">{% trans 'Examples' %}<span class="caret"></span></a>
                            <ul class="dropdown-menu" id="project_examples">
                                <!--<li><a href="javascript:void(0)" onclick="get_example_project(this)">疯狂迷宫</a></li>-->
                                <!--<li><a href="javascript:void(0)">机械先锋</a></li>-->
                                <!--<li><a href="javascript:void(0)">智能家居</a></li>-->
                            </ul>
                        </li>
                        {% if mrc_is_authenticated %}
                            <li>
                                <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{% trans '云存储' %}<span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="javascript:void(0)" onclick="save_project_to_cloud(this)">{% trans '保存当前工程' %}</a></li>
                                    <li><a href="#" data-toggle="modal" data-target="#show_cloud_projects">{% trans '查看云工程记录' %}</a></li>
                                </ul>
                            </li>
                        {% endif %}
                        <li>
                            <a href="#" class="download dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
                               aria-expanded="false">{% trans 'Help' %}<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="javascript:void(0)" data-toggle="modal" data-target="#myModal">{% trans 'about' %}</a></li>
                                <li><a href="javascript:void(0)" data-toggle="modal" data-target="#myModal02">{% trans 'license agreement' %}</a></li>

                            </ul>
                        </li>

                    </ul>
                    <div class="navbar-right" style="margin-top: 0.5%;margin-right: 5%">
                        {% if mrc_is_authenticated%}
                            <span>{% trans 'Hello!' %} {{ mrc_username }}</span>
                            <a href="{% url 'mrc:logout' %}">{% trans 'log out' %}</a>
                        {% else %}
                            <a href="{% url 'mrc:login' %}">{% trans 'sign in' %}</a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </nav>
</div>


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="margin-top:20%">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <img alt="Brand" src="{% static 'img/mrc_logo.png' %}">
            </div>
            <div class="modal-body">
                <p>{% trans 'The software company belongs to Guangzhou ASKidea Education Technology Co., Ltd.' %}</p>
                <p>{% trans 'MRC Block programming' %} {% trans 'version' %} v2.1.0</p>
                <p>{% trans 'developer' %} Jack He、Kellen zhang</p>
                <p>{% trans 'The final interpretation of MRC programming belongs to Guangzhou ASKidea Education Technology Co., Ltd.' %}</p>
            </div>
        </div>
    </div>
</div>

<!--授权书弹窗-->
<div class="modal fade" id="myModal02" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
    <div class="modal-dialog" role="document" style="width:1200px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <img alt="Brand" src="{% static 'img/mrc_logo.png' %}">
            </div>
            <div style="padding: 20px 40px;">
                <p style="text-align: center">{% trans 'power of attorney' %}</p>
                <p>{% trans 'The Information Licensing Agreement (hereinafter referred to as the "Agreement") is the use of the "MetasLab-MRC Programming Platform (hereinafter referred to as "the Platform") by Guangzhou ASKidea Education Technology Co., Ltd. (hereinafter referred to as "ASKidea"), and the user (hereinafter referred to as "You") authorize the use of the personal information entered into by the contract.' %}</p>
                <p>{% trans 'By clicking Confirm on the Application Authorization page, you agree to accept all the agreed contents of this Agreement and any rules, page displays, operation procedures, announcements or notices that have been published or may be published in connection with this Agreement (hereinafter collectively referred to as “Rules").' %}</p>
                <p>{% trans 'Before accepting this agreement, please read the entire contents of this agreement carefully (especially the content marked with bold underline).If you do not agree with any of the contents of this agreement, or do not understand the meaning of the terms accurately, please do not do anything.' %}</p>
                <p>{% trans 'First, You agree and authorize Ecoto to provide Alipay (China) Network Technology Co., Ltd. (hereinafter referred to as "Alipay") and Shenzhen Tencent Computer System Co., Ltd. (hereinafter referred to as "Tencent") for your personal information. Log in to the third-party platform.' %}</p>
                <p>{% trans 'Second, personal information in this agreement, including but not limited to:' %} </p>
                <p>{% trans '1. Your personal computer/device information;' %}</p>
                <p>{% trans '2, your curriculum design content;' %}</p>
                <p>{% trans '3, your operating information in the "platform", including but not limited to the operation log;' %}</p>
                <p>{% trans 'Third, You agree that the license in this agreement is irrevocable or revocable.' %}</p>
                <p>{% trans 'Fourth, You agree that any dispute arising from the performance of this agreement shall be brought by any party to the People`s Court where the defendant has his domicile.' %}</p>
                <p></p>
            </div>
        </div>
    </div>
</div>
<!--历史记录提示-->
<div class="modal fade historymodal" id="myModal03" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="margin-top:20%">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <img alt="Brand" src="{% static "img/mrc_logo.png"%}">
            </div>
            <div class="modal-body">
                <p class="hisp">{% trans 'Whether to open the building block' %}<span class="histimer"></span>{% trans 'historical records, please note that the current project is saved first' %}</p>

                <div class="historybtn">
                    <button class="historyyes" data-dismiss="modal" aria-label="Close">{% trans 'yes' %}</button><button class="historyno" data-dismiss="modal" aria-label="Close">{% trans 'no' %}</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!--是否删除历史记录-->
<div class="delehis">
    <div class="modal fade historymodal" id="myModal04" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="margin-top:20%">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <img alt="Brand" src="{% static 'img/mrc_logo.png' %}">
                </div>
                <div class="modal-body">
                    <p class="deletehisp">{% trans 'Whether to delete history' %}<span class="histimer"></span></p>
                    <div class="historybtn">
                        <button class="deletehistoryyes" data-dismiss="modal" aria-label="Close">{% trans 'yes' %}</button><button class="historyno" data-dismiss="modal" aria-label="Close">{% trans 'no' %}</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" tabindex="-1" role="dialog" id="login_tip">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">{% trans 'MRC Block programming' %} {% trans 'tip' %}</h4>
            </div>
            <div class="modal-body">
                <p>{% trans 'Dear user, I am very sorry! The following features of the MRC programming platform need to be logged in to use:' %}</p>
                <p>{% trans '1. Burn mode, code upload function, reset function;' %}</p>
                <p>{% trans '2. In Firmata mode, run code control function and run termination function online;' %}</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->



<div class="modal fade" tabindex="-1" role="dialog" id="show_cloud_projects">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">{% trans '云工程记录' %}</h4>
            </div>
            <div class="modal-body">
                <img src="{% static 'img/load.gif' %}" alt="" style="display: none;margin: auto">
                <table class="table table-striped" style="display: none">
                    <thead>
                    <tr>
                        <th>{% trans '工程id' %}</th>
                        <th>{% trans '工程名字' %}</th>
                        <th>{% trans '更新时间' %}</th>
                        <th>{% trans '操作' %}</th>
                    </tr>
                    </thead>
                    <tbody>
                    {#            <tr>#}
                    {#                <td>1</td>#}
                    {#                <td ><a class="cloud_change_name" data-type="text" data-title="修改工程名字" title="点击修改工程名字">test1</a></td>#}
                    {#                <td>2018.1.1</td>#}
                    {#                <td>#}
                    {#                    <button type="button" class="btn btn-primary btn-xs">打开</button>#}
                    {#                    <button type="button" class="btn btn-primary btn-xs">删除</button>#}
                    {#                </td>#}
                    {#            </tr>#}
                    {#            <tr>#}
                    {#                <td>1</td>#}
                    {#                <td ><a class="cloud_change_name" data-type="text" data-title="修改工程名字" title="点击修改工程名字">test2</a></td>#}
                    {#                <td>2018.1.1</td>#}
                    {#                <td>#}
                    {#                    <button type="button" class="btn btn-primary btn-xs">打开</button>#}
                    {#                    <button type="button" class="btn btn-primary btn-xs">删除</button>#}
                    {#                </td>#}
                    {#            </tr>#}
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>


<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" id="mrc_show_tip">
    <div class="modal-dialog modal-sm" role="document" style="margin-top: 20%">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" style="text-align: center">{% trans '信息提示' %}</h4>
            </div>
            <div class="modal-body">
                <img src="{% static 'img/fadeRight.jpg' %}" style="width: 8%;">
                <span></span>
            </div>
        </div>
    </div>
</div>

<div class="">
    <div class="">
        <div class="col-md-4 col-sm-12 left-contain" style="padding-right: 0px;">
            <div class="img-block">
                <div class="pre-img-block">
                    <div class="pre-img-head">
                        <div class="icon-1"><img id="ip_scale" src="{% static 'img/fangda.png' %}" style="float:left">
                            <p style="float:left;margin-left:10px;display:none" id="project_name"></p>
                        </div>
                        <div class="icon-2 character_start"><img src="{% static 'img/hongqi.png' %}"></div>
                        <div class="icon-2" id="character_reset"><img src="{% static 'img/tingzhi.png' %}"></div>
                    </div>
                    <div class="pre-img-show">
                        <div class="pre-img" id="operating-board">
                            <div class="container-fluid">
                                <div class="row">
                                    <div class="col-md-8">
                                        <div class="pre-img-board">
                                            <div class="pre-img-board-bg">
                                                <img src="{% static 'img/mrc_borad/bg.png' %}" >
                                            </div>
                                            <div class="pre-img-board-top-d2">
                                                <strong class="pin_d2" pin_number="2">0</strong>
                                                <img src="{% static 'img/mrc_borad/D_port.png' %}" >
                                            </div>
                                            <div class="pre-img-board-top-d11">
                                                <strong class="pin_d11" pin_number="11">0</strong>
                                                <img src="{% static 'img/mrc_borad/D_port.png' %}">
                                            </div>
                                            <div class="pre-img-board-top-d10">
                                                <strong class="pin_d10" pin_number="10">0</strong>
                                                <img src="{% static 'img/mrc_borad/D10.png' %}">
                                            </div>
                                            <div class="pre-img-board-left-a1">
                                                <strong class="pin_a1" pin_number="A1">0</strong>
                                                <img src="{% static 'img/mrc_borad/A_port.png' %}">
                                            </div>
                                            <div class="pre-img-board-left-a0">
                                                <strong class="pin_a0" pin_number="A0">0</strong>
                                                <img src="{% static 'img/mrc_borad/A_port.png' %}">
                                            </div>
                                            <div class="pre-img-board-right-a2">
                                                <strong class="pin_a2" pin_number="A2">0</strong>
                                                <img src="{% static 'img/mrc_borad/A_port.png' %}">
                                            </div>
                                            <div class="pre-img-board-right-a3">
                                                <strong class="pin_a3" pin_number="A3">0</strong>
                                                <img src="{% static 'img/mrc_borad/A_port.png' %}" >
                                            </div>
                                            <div class="pre-img-board-center-screen">
                                                <div>
                                                    <p class="led-single"></p>
                                                    <p class="led-four"></p>
                                                    <p class="led-four"></p>
                                                    <p class="led-four"></p>
                                                    <p class="led-four"></p>
                                                </div>
                                                <img src="{% static 'img/mrc_borad/screen.png' %}" >
                                            </div>

                                        </div>
                                    </div>
                                    <div class="col-md-2 pre-img-servo">
                                        <div class="col-md-12" style="margin: 0">
                                            <span>servo</span>
                                        </div>
                                        <div class="col-md-12 clear">
                                            <img src="{% static 'img/mrc_borad/s_red.png' %}" alt="" class="servo_red">
                                            <strong class="servo_d4" pin_number="4">0</strong>
                                        </div>
                                        <div class="col-md-12 clear">
                                            <img src="{% static 'img/mrc_borad/s_green.png' %}" alt="" class="servo_green">
                                            <strong class="servo_d7" pin_number="7">0</strong>
                                        </div>
                                        <div class="col-md-12 clear">
                                            <img src="{% static 'img/mrc_borad/s_blue.png' %}" alt="" class="servo_blue">
                                            <strong class="servo_d8" pin_number="8">0</strong>
                                        </div>
                                        <div class="col-md-12 clear">
                                            <img src="{% static 'img/mrc_borad/s_yellow.png' %}" alt="" class="servo_yellow">
                                            <strong class="servo_d11" pin_number="11">0</strong>
                                        </div>
                                        <div class="col-md-12 clear">
                                            <img src="{% static 'img/mrc_borad/s_black.png' %}" alt="" class="servo_black">
                                            <strong class="servo_d13" pin_number="13">0</strong>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="col-md-12">
                                            <span>M1</span>
                                        </div>
                                        <div class="row stand-alone-1">
                                            <div class="col-md-6 clear">
                                                <img src="{% static 'img/mrc_borad/M1L.png' %}" alt="">
                                                <strong class="motor_d3" pin_number="3">0</strong>
                                            </div>
                                            <div class="col-md-6 clear">
                                                <img src="{% static 'img/mrc_borad/M1R.png' %}" alt="">
                                                <strong class="motor_d5" pin_number="5">0</strong>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4" style="margin-left: -30px;">
                                        <div class="col-md-12">
                                            <span>M2</span>
                                        </div>
                                        <div class="row stand-alone-2">
                                            <div class="col-md-6 clear">
                                                <img src="{% static 'img/mrc_borad/M2L.png' %}" alt="">
                                                <strong class="motor_d6" pin_number="6">0</strong>
                                            </div>
                                            <div class="col-md-6 clear">
                                                <img src="{% static 'img/mrc_borad/M2R.png' %}" alt="">
                                                <strong class="motor_d9" pin_number="9">0</strong>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="ip-img-block">
                <div class="ip-pre-img-block">
                    <div class="ip-pre-img-show">
                        <div class="ip-pre-img" id="operating-space">
                            <div data-role="BlockAction" id="action-block"><img src="{{ MEDIA_URL }}default_human/753c35deaf4b507f.png"></div>
                        </div>
                    </div>
                    <div class="pre-control">
                        <!--<span class="pre-c1" style="margin-left:10px"><img src="img/fuzhi.png"></span>-->
                        <span class="pre-c1"><img class="clearAreaBtn" src="{% static 'img/shanchu.png' %}"></span>
                        <span class="pre-c1"><img class="inAreaBtn" src="{% static 'img/da.png' %}"></span>
                        <span class="pre-c1"><img class="outAreaBtn" src="{% static 'img/xiao.png' %}"></span>
                        <span class="ip-coordinates"> x: 270 y: 47</span>
                    </div>
                </div>
            </div>

            <div class="row small-block">
                <div class="col-md-6" style="padding: 0;border-right: 1px solid #DDDDDD;height: 100%;overflow: hidden;" id="intojs_figure">
                    <div class="clear ip-img-library-head">
                        <div style="float: left"><span>{% trans 'figure' %}</span></div>
                        <div class="icon-6" style="float: right;"><img src="{% static 'img/shangchuan.png' %}" class="myUploads" data-type="human"></div>
                        <div class="icon-4" style="float: right;margin-right: 3%"><img src="{% static 'img/renwu.png' %}" class="openLibrary" data-type="human"></div>
                    </div>
                    <div class="small-show-right hm-container myscrollbar" id="changeImg">
                        <div class="change-img active"><img src="{{ MEDIA_URL }}default_human/753c35deaf4b507f.png" data-init="true"></div>
                        <div class="change-img"><img src="{{ MEDIA_URL }}default_human/8d07cfa97c431ca3.png" data-init="true"></div>
                        <div class="change-img"><img src="{{ MEDIA_URL }}default_human/4d3f696752beba7e.png" data-init="true"></div>
                        <div class="change-img"><img src="{{ MEDIA_URL }}default_human/e50f98c1b65acb9c.png" data-init="true"></div>
                        <div class="change-img"><img src="{{ MEDIA_URL }}default_human/5f1decb5302f330b.png" data-init="true"></div>

                    </div>
                </div>
                <div class="col-md-6" style="padding: 0;height: 100%;overflow: hidden;" id="intojs_background">
                    <div class="clear background-img-library-head">
                        <div style="float: left"><span>{% trans 'background' %}</span></div>
                        <div class="icon-6" style="float: right"><img src="{% static 'img/shangchuan.png' %}" class="myUploads" data-type="background"></div>
                        <div class="icon-3" style="float: right;margin-right: 3%"><img src="{% static 'img/tupian.png' %}" class="openLibrary" data-type="background"></div>
                    </div>
                    <div class="bgk-show-right myscrollbar bg-container">
                        <div class="bgk" data-clear="true"><img src="{% static 'img/juxingkuang.png' %}" data-init="true"></div>
                        <div class="bgk"><img src="{{ MEDIA_URL }}default_background/44f695375380944c.png" data-init="true"></div>
                        <div class="bgk"><img src="{{ MEDIA_URL }}default_background/88797c19eb80b195.png" data-init="true"></div>
                        <div class="bgk"><img src="{{ MEDIA_URL }}default_background/2bc7ea26184e2347.png" data-init="true"></div>
                        <div class="bgk"><img src="{{ MEDIA_URL }}default_background/a9d458b96a44ac83.png" data-init="true"></div>
                        <div class="bgk"><img src="{{ MEDIA_URL }}default_background/b480459977ca1742.png" data-init="true"></div>

                    </div>
                </div>
            </div>

        </div>
        <div class="col-md-8 col-sm-12">
            <div>
                <div class="all right-content" id="box">
                    <h2 id="tabRow" class="Conbutleft">
                        <span style="background:#999;color:#fff;border-radius:6px 0px 0px 0px" id="tab_blocks">{% trans 'Modules' %}</span>
                        <span id="tab_arduino">{% trans 'trigger' %}</span>
                        <span style="margin:0;border-radius:0px 6px 0px 0px" id="tab_xml">Python</span>
                    </h2>
                    <h3 class="Conbutright">
                        <i><img src="{% static 'img/hong.png' %}" width="8%" class="connect_state" title="{% trans 'Not connected to MRC' %}"></i>
                        {% if mrc_is_authenticated %}
                            <button type="button" onclick="uploadClick()" id="arduino_upload_sketch">{% trans 'upload' %}</button>
                            <button type="button" onclick="resetClick()" id="arduino_reset_sketch">{% trans 'reset' %}</button>
                        {% else %}
                            <button type="button" onclick="$('#login_tip').modal()" id="arduino_upload_sketch">{% trans 'upload' %}</button>
                            <button type="button" onclick="$('#login_tip').modal()" id="arduino_reset_sketch">{% trans 'reset' %}</button>
                        {% endif %}
                        <button onclick="discard()" id="clear_wordspace">{% trans 'remove' %}</button>
                    </h3>
                    <h4 id="blockly_mode" style="float: right;width: auto;margin: 7px 20px">{% trans 'Burn mode' %}</h4>
                    <a style="display:block;" id="content_blocks"></a>
                    <a>
                        <textarea id="content_arduino" class="content" readonly wrap="off"></textarea>
                    </a>
                    <a>
                        <textarea id="content_xml" class="content" wrap="off"></textarea>
                    </a>
                </div>

            </div>
        </div>
    </div>
</div>
<script>
    window.onresize = function () {
        if ($(window).width() > 1000) {
            $(".right-content").height($(window).height() - 100);
            $(".left-contain").height($(window).height() - 60);
        }
    };
    $(window).resize();

    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    var csrftoken = getCookie('csrftoken');
    window.online_data_obj=new online_data_base();

    $(document).ready(function () {
        $(".left-contain").height($(document).height() - $(document).height()*0.065);
        $(".right-content").height($(document).height() - $(document).height()*0.1);
        var d_height = $(".small-block").height() - 36;
        $(".d-line").css({"height": d_height, "top": "36px"});
        $(".small-show").css({"height": d_height});
    });

    function renderContent(count) {
        if (count == 1) {
            var arduinoTextarea = document.getElementById('content_arduino');
            arduinoTextarea.value = Blockly.Arduino.workspaceToCode(Blockly.mainWorkspace);
            arduinoTextarea.focus();
        }
        else if (count == 2) {
            var xmlTextarea = document.getElementById('content_xml');
            // var xmlDom = Blockly.Xml.workspaceToDom(Blockly.mainWorkspace);
            // var xmlText = Blockly.Xml.domToPrettyText(xmlDom);
            // xmlTextarea.value = xmlText;
            xmlTextarea.value = Blockly.Python.workspaceToCode(Blockly.mainWorkspace);
            xmlTextarea.focus();
        }

    }

    function tab(a) {
        var obox = document.getElementById(a);
        var spans = obox.getElementsByTagName('span');
        var divs = obox.getElementsByTagName('a');
        for (var i = 0; i < spans.length; i++) {
            spans[i].index = i;
            spans[i].onclick = function () {
                for (var i = 0; i < spans.length; i++) {
                    spans[i].style.background = '#fff';
                    spans[i].style.color = '#333'
                    divs[i].style.display = 'none'
                    renderContent(i)
                }
                this.style.background = '#999'
                this.style.color = '#fff'
                divs[this.index].style.display = 'block'
            }
        }
    }

    tab('box');
</script>

<script type="application/javascript">
    /**
     * 关于块、背景、人物操作等方法与监听
     * 对外接口：
     *   ActionBlock: 块行动控制对象;
     *   createBackground: 创建背景方法, 用于背景添加的行内 js 调用;
     *                      createBackground(url:图片路径)
     *   createHuman:   创建人物方法, 用于背景人物的行内 js 调用;
     *                  createHuman(url:图片路径)
     *   getSaveConfig: 获取保存配置方法;
     *                  createHuman(string:是否返回字符串)
     *   initByConfig:  使用配置进行初始化方法;
     *                  initByConfig(config:getSaveConfig 返回的配置信息, string:是否传入字符串)
     * @author OJesusO
     */
    (function(areaObj, hmContainer, bgContainer, doc, W){
        //详细的块行动控制 http://ojesuso.gitee.io/action_api_class/
        //实例化 BlockAction, 用于控制块的行动操作
        W.ActionBlock = new BlockAction('#action-block', {
            images: getHumanImgsrc(),
            moveStep: 1,
            direction:2
        });


        function openDraggable () {
            ActionBlock.elementObj.draggable({
                grid: [1, 1],
                start: function(evt, ui) {
                    ActionBlock.transition = ui.helper.css('transition');
                    ui.helper.css({
                        transition: 'none',
                    });
                },
                drag: function(evt, ui) {
                },
                stop: function(evt, ui) {
                    ui.helper.css({
                        transition: ActionBlock.transition,
                    });
                },
                containment: 'parent',
            });
        };
        openDraggable();

        //监听图片改变, 切换 ActionBlock 的背景 | 如果操作空间为空 放置内容
        hmContainer.on('click', '.change-img', function(){
            if (areaObj.find(ActionBlock.elementObj).length == 0) {
                ActionBlock.elementObj.appendTo(areaObj);
                openDraggable();
            }
            var src = $(this).find('img').attr('src');
            ActionBlock.changeImage(src, 68, 'auto');
            hmContainer.find('.change-img').not($(this)).removeClass('active');
            $(this).addClass('active');

            if(window.localStorage && (window.localStorage.setItem('a', 123) , window.localStorage.getItem('a') == 123)){
                //判断浏览器是否支持localStorage
                var character_data=getSaveConfig(true);
                localStorage.setItem('ipAndBgk',character_data);
            }

        }).find('img').each(function(){
            setImageId(this);
        });

        //监听背景切换
        bgContainer.on('click', '.bgk', function(){
            var src = $(this).find('img').attr('src');
            if ($(this).data('clear')) {
                areaObj.css({
                    backgroundImage: 'none',
                }).data('bgSrc', '');
            } else {
                areaObj.css({
                    backgroundImage: 'url('+ src +')',
                }).data('bgSrc', src);
            }
            if(window.localStorage && (window.localStorage.setItem('a', 123) , window.localStorage.getItem('a') == 123)){
                //判断浏览器是否支持localStorage
                var character_data=getSaveConfig(true);
                localStorage.setItem('ipAndBgk',character_data);
            }
        }).find('img').each(function(){
            setImageId(this);
        });
        areaObj.data('bgSrc', '');

        //清空操作空间
        $('.clearAreaBtn').click(function(){
            ActionBlock.elementObj.remove();
            hmContainer.find('.change-img').removeClass('active');
        });

        //放大操作空间
        $('.inAreaBtn').click(function(){
            areaObj.css('zoom', Zoom.in());
        }).mousedown(function(e){
            if (3 == e.which) {
                areaObj.css('zoom', Zoom.max());
            }
        }).bind("contextmenu", function(){
            return false;
        });

        //缩小操作空间
        var outAreaBtn = $('.outAreaBtn');
        outAreaBtn.click(function(){
            areaObj.css('zoom', Zoom.out());
        }).mousedown(function(e){
            if (3 == e.which) {
                areaObj.css('zoom', Zoom.min());
            }
        }).bind("contextmenu", function(){
            return false;
        });

        //倍率放大逻辑
        var Zoom = (function(prevBtnObj){
            var maxZoom = 2, minZoom = .1,
                zoom = 1, cancelBtn = null;
            function toZoom (type) {
                if (type === true) {
                    zoom += .1;
                } else if (type === false) {
                    zoom -= .1;
                } else {
                    zoom = type
                }
                if (zoom > maxZoom) {
                    zoom = maxZoom;
                } else if (zoom < minZoom) {
                    zoom = minZoom;
                }
                toggleCancelBtn(zoom != 1);
                return zoom;
            };
            function toggleCancelBtn (type) {
                if (!cancelBtn) {
                    cancelBtn = $(doc.createElement('span'));
                    cancelBtn.addClass('pre-c1');
                    cancelBtn.html('<img class="cancelZoomBtn" src="img/cexiao.png">');
                }
                if (type) {
                    if (prevBtnObj.parent().find(cancelBtn).length == 0) {
                        prevBtnObj.after(cancelBtn);
                        cancelBtn.find('img').click(function(){
                            toZoom(1);
                        });
                    }
                } else {
                    cancelBtn.remove();
                    areaObj.css('zoom', zoom);
                }
            };
            return {
                in: function(){ return toZoom(true) },
                out: function(){ return toZoom(false) },
                max: function(){ return toZoom(maxZoom) },
                min: function(){ return toZoom(minZoom) },
            };
        }(outAreaBtn.parent()));

        //鼠标位置记录
        var areaOffset = areaObj.offset();
        areaObj.mousemove(function(evt){
            var xy = getCoordinateByEvent(evt);
            $('.ip-coordinates').text(' x: '+ xy[0] +' y: '+ xy[1]);
        });
        function getCoordinateByEvent (evt) {
            //new goog.math.Coordinate();
            return [evt.pageX - areaOffset.left, evt.pageY - areaOffset.top];
        };

        //上传操作功能
        (function(){
            var upload_type = null;
            var uploadCore = new UploadsCore({
                    debug: 1,
                    inputId: 'uploadcore-input',
                    fileType: ['image'],
                    uploadURL: '{% url "mrc:upload_file" %}',
                    fileSuffix: {'image':['png', 'jpg', 'jpeg']},
                    csrftoken:csrftoken,
                    initpostBeforeCallback: function (file) {
                        //初始化上传前回调
                        return {
                            postData: {
                                upload_type: upload_type,
                                file_name: file.name,
                                file_type: file.type,
                            }
                        };
                    },
                    getMd5ingCallback: function (file, loaded, total) {
                        //获取md5中回调
                    },
                    waitingCallback: function (data) {
                        //等待上传中回调
                    },
                    startingCallback: function (data) {
                        //开始上传中回调
                    },
                    progressCallback: function (data) {
                        //上传传输中回调
                    },
                    successCallback: function (data) {
                        //上传成功后回调
                        data = data.response;
                        switch (data.upload_type) {
                            case 'background':
                                /*createBackground(data.url);*/ break;
                            case 'human':
                                /*createHuman(data.url);*/ break;
                            default:
                                return TOOL.errorMsg("{% trans '文件上传出错！' %}");
                        }
                        TOOL.successMsg("{% trans '上传成功！' %}");
                    },
                    failCallback: function (data) {
                        //上传失败后回调
                        TOOL.errorMsg("{% trans '上传失败！' %}");
                    },
                    endedCallback: function (data) {
                        //结束上传后回调
                    },
                    errorCallback: function (data) {
                        //失败后回调
                    },
                }),
                input = $('#uploadcore-input');
            $('.myUploads').click(function(){

                    {% if mrc_is_authenticated %}
                        var type = $(this).data('type');
                        upload_type = type;
                        input.click();
                    {% else %}
                        $('#login_tip').modal()
                    {% endif %}
                }
            ).css({
                cursor: 'pointer',
            });

        }());

        //读取列表功能
        (function(){
            $('.openLibrary').click(function(){
                var type = $(this).data('type');
                switch (type) {
                    case 'background': break;
                    case 'human': break;
                    default: return TOOL.errorMsg("{% trans '读取文件列表出错！' %}");
                }
                $.ajax({
                    url:  '{% url "mrc:get_images" %}?type=' + type,
                    success: function(data){
                        var obj = $(doc.createElement('div'));
                        obj.html(data);
                        obj = obj.html(obj.find('ul'));
                        layer.open({
                            type: 1,
                            shadeClose: true,
                            area: ['465px', '380px'], //宽高
                            content: obj.html(),
                            title: "{% trans 'select' %}"+" "+ (type=='background' ? "{% trans 'background' %}" : "{% trans 'figure' %}"),
                            success: function(layero, index){
                                switch (type) {
                                    case 'background':
                                        var callback = 'createBackground'; break;
                                    case 'human':
                                        var callback = 'createHuman'; break;
                                }
                                layero.find('ul').attr('id', 'images-list');
                                layero.find('li>a').each(function(){
                                    var src = $(this).attr('href');
                                    $(this).attr('href', 'javascript:'+ callback +'(\''+ src +'\');layer.close('+ index +');');
                                    $(this).html('').css({
                                        backgroundImage: 'url('+src+')',
                                    });
                                });
                            },
                            end: function(layero){
                                switch (type) {
                                    case 'background':
                                        var obj = bgContainer; break;
                                    case 'human':
                                        var obj = hmContainer; break;
                                }
                                obj.animate({
                                    // scrollTop: obj[0].scrollHeight,
                                }, 300);
                            },
                        });
                    },
                    error: function(){
                        TOOL.errorMsg("{% trans '读取文件列表出错！' %}");
                    },
                });
            }).css({
                cursor: 'pointer',
            });
        }());

        //创建背景
        W.createBackground = function (url) {
            if (hasBgid(url)) {
                return false;
            }
            var obj = $(doc.createElement('div'));
            obj.addClass('bgk');
            obj.html('<img src="'+ url +'">');
            bgContainer.append(obj);
            setImageId(obj.find('img'));
            return obj;
        };

        //创建人物
        W.createHuman = function (url) {
            if (hasHmid(url)) {
                return false;
            }
            var obj = $(doc.createElement('div'));
            obj.addClass('change-img');
            obj.html('<img src="'+ url +'">');
            hmContainer.append(obj);
            setImageId(obj.find('img'));
            ActionBlock.Images.set(url);
            return obj;
        };

        //创建图片唯一Id
        function getImageId (src) {
            return SparkMD5.hash(src.split('/').pop());
        };
        function setImageId (obj) {
            obj = $(obj);
            obj.attr('data-id', getImageId(obj.attr('src')));
        };
        function hasHmid (src) {
            var nowId = getImageId(src);
            return hmContainer.find('img[data-id="'+ nowId +'"]').length > 0;
        };
        function hasBgid (src) {
            var nowId = getImageId(src);
            return bgContainer.find('img[data-id="'+ nowId +'"]').length > 0;
        };

        //获取保存配置
        W.getSaveConfig = function (string) {
            var config = {
                backgrounds: getBackgroundImgsrc(),
                humans: getHumanImgsrc(),
                currentBg: areaObj.data('bgSrc'),
                currentHm: ActionBlock.elementObj.find('img').attr('src'),
            };
            return string ? TOOL.jsonStrify(config) : config;
        };
        function getHumanImgsrc () {
            var humans = [];
            hmContainer.find('img').each(function(){
                humans.push($(this).attr('src'));
            });
            return humans;
        };
        function getBackgroundImgsrc () {
            var backgrounds = [];
            bgContainer.find('img').each(function(){
                if ($(this).parent().data('clear')) {
                    return true;
                }
                backgrounds.push($(this).attr('src'));
            });
            return backgrounds;
        };

        //使用配置进行初始化
        W.initByConfig = function (config, string) {
            if (string) {
                config = TOOL.jsonParse(config);
            }
            config = config || {};
            initHumanImage(config.humans);
            initBackgroundImage(config.backgrounds);
            setTimeout(function(){
                initCurrentHm(config.currentHm);
                initCurrentBg(config.currentBg);
            }, 100);
        };
        function initHumanImage (humans) {
            hmContainer.find('img').not('[data-init="true"]').parent().remove();
            $.each(humans, function(key, src){
                var obj = createHuman(src);
                if (obj) {
                    obj.find('img').on('error', function(){
                        if (ActionBlock.elementObj.find('img').attr('src') == $(this).attr('src')) {
                            hmContainer.find('img[data-init]').first().click();
                        }
                        obj.remove();
                    });
                }
            });
        };
        function initBackgroundImage (backgrounds) {
            bgContainer.find('img').not('[data-init="true"]').parent().remove();
            $.each(backgrounds, function(key, src){
                var obj = createBackground(src);
                if (obj) {
                    obj.find('img').on('error', function(){
                        obj.remove();
                    });
                }
            });
        };
        function initCurrentHm (hm) {
            if (!hm) {
                return false;
            }
            hm = getImageId(hm);
            hmContainer.find('img[data-id="'+ hm +'"]').click()
        };
        function initCurrentBg (bg) {
            if (!bg) {
                return false;
            }
            bg = getImageId(bg);
            bgContainer.find('img[data-id="'+ bg +'"]').click();
        };


        $("#character_reset").click(function(){
            {% ifequal mrc_is_authenticated  False%}
                $("#login_tip").modal();
                return;
            {% endifequal %}

            var blockly_stop = new WebSocket("ws://localhost:9257/stop_running");
            blockly_stop.onopen = function(evt) {  //绑定连接事件
                console.log("stop running Connection open........");
                blockly_stop.send("stop")
            };
            blockly_stop.onmessage = function(evt){
                if(evt.data=="ok"){
                    blockly_stop.close()
                }

            };
            blockly_stop.onclose = function(evt) { //绑定关闭或断开连接事件
                console.log("stop running Connection closed.");
                ActionBlock.isAction();
                ActionBlock.reset();
                window.online_data_obj.clear_pin_value();
                // ActionBlock.exe_bock_not_reply({"method": "rest_board", "params": ['null']});
                window.blockly_is_run=false;
                var led_single=document.getElementsByClassName('led-single')[0];
                var led_four=document.getElementsByClassName('led-four');
                led_single.style.display="none";
                for(var i=0;i<led_four.length;i++){
                    led_four[i].style.display="none";
                }
                var fater_node=led_single.parentNode;
                fater_node.style.display="none";
            };
        });

        function get_blockly_python(){
            /*获取积木的python代码，返回一个代码块*/
            var python_text=Blockly.Python.workspaceToCode(Blockly.mainWorkspace);
            console.log(python_text);
            return python_text;
        }
        var check_queue_timer=null;
        window.check_queue=function () {  //检测积木的执行队列是否有item
            var fulfil=ActionBlock.Queue.hasItem();
            if(fulfil){
            }else{
                clearInterval(check_queue_timer);
                window.blockly_is_run=false;   //是否在运行积木的状态
                $('.character_start').find('img').attr('src','{% static 'img/run_blockly_dark.png' %}');
            }
        };

        $(".character_start").click(function(){

            {% ifequal mrc_is_authenticated  False%}
                $("#login_tip").modal();
                return;
            {% endifequal %}

            if(window.blockly_is_run==true){
                alert("{% trans 'Building block action is being performed!' %}");
                return;
            }
            var character_motion=get_blockly_python();
            upload_online_run_xml(1,"",1);
            try{
                $('.character_start').find('img').attr('src','{% static "img/run_blockly_bright.png" %}');
                window.blockly_is_run=true;

                window.figure_ws = new WebSocket("ws://localhost:9257/figure_state");
                window.figure_ws.onopen = function(evt) {
                    window.figure_ws.send(JSON.stringify(ActionBlock.getInfo()))
                };
                window.figure_ws.onmessage=function (ev) {

                };
                window.figure_ws.onclose = function(evt){
                    console.log("figure_ws close")
                };


                window.blockly_ws = new WebSocket("ws://localhost:9257/run_code");

                window.blockly_ws.onopen = function(evt) {  //绑定连接事件
                    console.log("run_code Connection open ...");
                    window.blockly_ws.send(character_motion);
                };

                window.blockly_ws.onmessage = function(evt) {//绑定收到消息事件
                    console.log( "Received Message: " + evt.data);

                    var call_data=JSON.parse(evt.data);
                    var callback_func=call_data["method"];
                    var callbacl_arg=call_data["params"];
                    if(callback_func=="set_panel_write_data"){
                        ActionBlock.set_panel_write_data(callbacl_arg[0],callbacl_arg[1],0)
                    }else if(callback_func=="set_panel_read_data"){
                        ActionBlock.set_panel_read_data(callbacl_arg[0],callbacl_arg[1],0)
                    }else if(callback_func=="exe_single_led_block"){
                        ActionBlock.exe_single_led_block(callbacl_arg[0],callbacl_arg[1],callbacl_arg[2],0)
                    }else if(callback_func=="exe_four_led_block"){
                        ActionBlock.exe_four_led_block(callbacl_arg[0],callbacl_arg[1],callbacl_arg[2],callbacl_arg[3],0)
                    }else if(callback_func=="move"){
                        ActionBlock.move(-callbacl_arg[0],callbacl_arg[1])
                    }else if(callback_func=="moveTo"){
                        var x=callbacl_arg[0];
                        var y=callbacl_arg[1];
                        if (x=="NaN"){
                            x=NaN
                        }
                        if(y=="NaN"){
                            y=NaN
                        }
                        ActionBlock.moveTo(callbacl_arg[0],callbacl_arg[1],callbacl_arg[2])
                    }else if(callback_func=="rotate"){
                        ActionBlock.rotate(callbacl_arg[0],callbacl_arg[1])
                    }else if(callback_func=="rotateTo"){
                        ActionBlock.rotateTo(callbacl_arg[0],callbacl_arg[1])
                    }
                    else if(callback_func=="close_ws"){
                        window.blockly_ws.close();
                    }
                    else if(callback_func=="ws_error_tip"){
                        alert("{% trans '积木运行错误，请检测积木输入是否正确！' %}");
                    }

                };

                window.blockly_ws.onclose = function(evt) { //绑定关闭或断开连接事件
                    console.log("run_code Connection closed.");
                    check_queue_timer=window.setInterval("check_queue()",1000);
                };

            }
            catch (e){
                window.blockly_is_run=false;
                $('.character_start').find('img').attr('src','{% static "img/run_blockly_dark.png" %}');
                alert("{% trans 'Execution of building block command motion error' %}"+e);
            }
            // check_queue_timer=window.setInterval("check_queue()",1000);

        });

    }(
        $('#operating-space'),  //操作空间
        $('.hm-container'),     //人物容器
        $('.bg-container'),     //背景容器
        document, window
    ));
</script>
<script type="text/javascript">
    function selectdo(obj) {
        var url="/i18n/setlang/";
        var lang=$(obj).attr("value");
        $.ajax({
            url: url,
            type: "Post",
            beforeSend: function(xhr, settings) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken);

            },
            data: {
                "next":"{{ request.META.PATH_INFO }}",
                "language":lang
            },
            dataType: "text",
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                show_mrc_tip("error!" + errorThrown);
            },
            success: function (data) {
                location.reload();
            }
        });
    }
</script>
<script type="application/javascript">
    function setCookie(c_name,value,expiredays)
    {
        var exdate=new Date()
        exdate.setDate(exdate.getDate()+expiredays)
        document.cookie=c_name+ "=" +escape(value)+
            ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
    }

    function getCookie(c_name)
    {
        if (document.cookie.length>0)
        {
            c_start=document.cookie.indexOf(c_name + "=")
            if (c_start!=-1)
            {
                c_start=c_start + c_name.length+1
                c_end=document.cookie.indexOf(";",c_start)
                if (c_end==-1) c_end=document.cookie.length
                return unescape(document.cookie.substring(c_start,c_end))
            }
        }
        return ""
    }


    function offline_startIntro(){
        var intro = introJs();
        intro.setOptions({
            steps: [
                {
                    element: '#lange_a',
                    intro: "<strong>"+"{% trans 'language selection' %}"+"</strong><br><br>"+"{% trans "You can choose to display in your own country's language!" %}",
                    position: 'right'
                },
                {
                    element:document.querySelectorAll('#tab_blocks')[0],
                    intro: "<strong>"+"{% trans 'Building block type' %}"+"</strong><br><br>"+"{% trans 'You can select the type of building blocks you need and quickly display the required building blocks!' %}",
                    position:'right'
                },
                {
                    element:document.querySelectorAll(".blocklyDraggable")[1],
                    intro: "<strong>"+"{% trans 'Building block selection' %}"+"</strong><br><br>"+"{% trans 'You can select the appropriate building block and drag the building block to the right area according to the functional requirements!' %}",
                    position:'right'
                },
                {
                    element:"#board_selection_tip",
                    intro: "<strong>"+"{% trans 'MRC board selection' %}"+"</strong><br><br>"+"{% trans 'You can select the board model you have on hand and select the appropriate board type before uploading the code!' %}",
                    position:'right'
                },
                {
                    element:document.querySelectorAll(".connect_state")[0],
                    intro: "<strong>"+"{% trans 'Board connection status' %}"+"</strong><br><br>"+"{% trans "The board connection status can be displayed in real time. The green light indicates that the connection board is successful, and the red light indicates that the board is disconnected!" %}",
                    position:'right'
                },
                {
                    element:"#arduino_upload_sketch",
                    intro: "<strong>"+"{% trans 'Code upload' %}"+"</strong><br><br>"+"{% trans 'The building block code of the work area of the building block is uploaded to the control board and the offline operation mode is realized!' %}",
                    position:'right'
                },
                {
                    element:"#arduino_reset_sketch",
                    intro: "<strong>"+"{% trans 'Clear board code' %}"+"</strong><br><br>"+"{% trans "You can clear the board's function code, please confirm whether the board is connected successfully!" %}",
                    position:'right'
                },
                {
                    element:"#clear_wordspace",
                    intro: "<strong>"+"{% trans "Clear building block workspace" %}"+"</strong><br><br>"+"{% trans "Can remove all building blocks in the block's workspace!" %}",
                    position:'right'
                }
            ],
            nextLabel:"{% trans 'next' %}",
            prevLabel:"{% trans 'previous' %}",
            skipLabel:"{% trans 'skip' %}",
            doneLabel:"{% trans 'do' %}"
        });

        intro.start();
    }
    function online_startIntro(){
        var intro = introJs();
        intro.setOptions({
            steps: [
                {
                    element: '#lange_a',
                    intro: "<strong>"+"{% trans 'language selection' %}"+"</strong><br><br>"+"{% trans "You can choose to display in your own country's language!" %}",
                    position: 'right'
                },
                {
                    element:document.querySelectorAll('#tab_blocks')[0],
                    intro: "<strong>"+"{% trans 'Building block type' %}"+"</strong><br><br>"+"{% trans 'You can select the type of building blocks you need and quickly display the required building blocks!' %}",
                    position:'right'
                },
                {
                    element:document.querySelectorAll(".blocklyDraggable")[1],
                    intro: "<strong>"+"{% trans 'Building block selection' %}"+"</strong><br><br>"+"{% trans 'You can select the appropriate building block and drag the building block to the right area according to the functional requirements!' %}",
                    position:'right'
                },
                {
                    element:document.querySelectorAll(".character_start")[0],
                    intro: "<strong>"+"{% trans 'Running block code' %}"+"</strong><br><br>"+"{% trans "You can run block code online to control the status of the board's corresponding pins!" %}",
                    position:'right'
                },
                {
                    element:"#character_reset",
                    intro: "<strong>"+"{% trans 'Terminate building block code to run' %}"+"</strong><br><br>"+"{% trans 'Immediately terminate the execution of the building block code and return the board to its original state!' %}",
                    position:'right'
                },
                {
                    element:"#operating-board",
                    intro: "<strong>"+"{% trans 'Display pin status' %}"+"</strong><br><br>"+"{% trans 'When running the code, the corresponding pin data of the execution block can be displayed in real time!' %}",
                    position:'right'
                },
                {
                    element:"#operating-space",
                    intro: "<strong>"+"{% trans 'IP figures' %}"+"</strong><br><br>"+"{% trans 'When running the code, The building blocks module IP of the movement to perform will make the corresponding action!' %}",
                    position:'right'
                },
                {
                    element:"#intojs_figure",
                    intro: "<strong>"+"{% trans 'figures image select' %}"+"</strong><br><br>"+"{% trans 'IP man switch and can upload pictures as IP figure you need!' %}",
                    position:'right'
                },
                {
                    element:"#intojs_background",
                    intro: "<strong>"+"{% trans 'background image select' %}"+"</strong><br><br>"+"{% trans 'Background of switch and can upload pictures you need as a background!' %}",
                    position:'right'
                },
                //{
                //  element:"#ip_scale",
                {#intro: "<strong>"+"{% trans 'Enlarge display board' %}"+"</strong><br><br>"+"{% trans 'You can enlarge the display area of the board!' %}",#}
                // position:'right'
                //},
                {
                    element:document.querySelectorAll(".connect_state")[0],
                    intro: "<strong>"+"{% trans 'Board connection status' %}"+"</strong><br><br>"+"{% trans 'The board connection status can be displayed in real time. The green light indicates that the connection board is successful, and the red light indicates that the board is disconnected!' %}",
                    position:'right'
                },
                {
                    element:"#clear_wordspace",
                    intro: "<strong>"+"{% trans "Clear building block workspace" %}"+"</strong><br><br>"+"{% trans "Can remove all building blocks in the block's workspace!" %}",
                    position:'right'
                }
            ],
            nextLabel:"{% trans 'next' %}",
            prevLabel:"{% trans 'previous' %}",
            skipLabel:"{% trans 'skip' %}",
            doneLabel:"{% trans 'do' %}"
        });

        intro.start();
    }

    function show_mrc_tip(message,is_success) {
        $('#mrc_show_tip .modal-body span').html(message);
        if(is_success){
            $('#mrc_show_tip .modal-body img').attr("src","{% static 'img/fadeRight.jpg' %}");
        }else{
            $('#mrc_show_tip .modal-body img').attr("src","{% static 'img/fadeWrong.jpg' %}");
        }
        $("#mrc_show_tip").modal('show');
    }

    $(window).load(function () {
        setTimeout(function () {
            if(window.mrc_mode_state==0){
                if(getCookie('offline_startIntro')!='offline'){
                    offline_startIntro();
                    setCookie('offline_startIntro','offline',365)
                }

            }else{
                if(getCookie('online_startIntro')!='online') {
                    online_startIntro();
                    setCookie('online_startIntro','online',365)
                }
            }
        },1000)
    });
    function notice_close(ele) {
        $("#notice_tip").css("display","none");
    }

    $(document).ready(function () {
        $.ajax({
            url: "{% url 'mrc:get_notice_info' %}",
            type: "Get",
            dataType: "json",
            error: function (XMLHttpRequest, textStatus, errorThrown) {

            },
            success: function (data) {
                if(data["is_show"]==1){
                    $("#notice_tip marquee span").text(data["message"]);
                    $("#notice_tip").css("display","block");
                }
            }
        });
    })

    $(window).load(function () {
        setTimeout(function () {
            if(window.localStorage && (window.localStorage.setItem('a', 123) , window.localStorage.getItem('a') == 123)){
            //判断浏览器是否支持localStorage
            var block_xml=localStorage.getItem('block_xml');
            var ip_bgk=localStorage.getItem('ipAndBgk');
            if(block_xml!=""){

                try {
                    var xml = Blockly.Xml.textToDom(block_xml);
                } catch (e) {
                    {#show_mrc_tip(gettext('Error loading project file, block file error'));#}
                    return;
                }
                Blockly.mainWorkspace.clear();
                Blockly.Xml.domToWorkspace(Blockly.mainWorkspace, xml);
            }
            if(ip_bgk!="" && ip_bgk!=null){
                initByConfig(ip_bgk,true);
            }

        }
        },1000);
    })

</script>
</body>
</html>
